<template>
	<view>
		<!-- <free-nav-bar title="游客端"></free-nav-bar> -->

		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">
			<view class="fixed-title  text-center pt-2 pb-2 font-14 text-white ">上游服务端</view>
			<view class="bg-linear-gradient" style="margin-top: 39px;">
				<view class="p-2 ">
					<u-swiper height="300" :list="list"></u-swiper>
				</view>
			</view>
			<u-notice-bar style="border: 1px solid #8ED0F2; margin: 10px;" color="#8ED0F2" bg-color="#fff"
				border-radius="10" :more-icon="true" class="pl-2 pr-2" mode="vertical" :is-circular="false"
				:list="lists" @click="gitMin('/pages/tabbar/index/NewList')"></u-notice-bar>

			<view class="dfex pl-2 pr-2 mt-6 pb-4">
				<view style="text-align: center;" v-for="(item, index) in CatList" :key="index" @click="open(item.url)">
					<i v-if="item.icon" class="text-white bg-FFC251 p-2 font rounded-circle  iconfont"
						v-html="item.icon"></i>
					<view class="mt-4 font-14" style="lineHights">{{item.name}}</view>
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<!-- 涉农申报列表 -->
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">涉农主体列表</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/Agriculture')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class=" mt-5">
					<view class="dfex u-line  pb-2 mb-2" v-for="(item, index) in nenoList" :key="index">
						<view @click="gitMin('/pages/tabbar/index/AgricultureDetails')">
							<view class="text-333333 font-14">{{item.title}}</view>
							<view class="dfes mt-2">
								<view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded">芒果</view>
								<view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded">澄迈</view>
								<view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded">三亚</view>
							</view>
						</view>
						<view  @click="click()" v-if="item.annt ==='已通过，去查看'" class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{item.annt}}</view>
						<view  v-if="item.annt ==='查看申请审核中'" class="bg-CECECE pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{item.annt}}</view>
						<view  v-if="item.annt ==='申请查看主体信息'" class="bg-FFC251 pl-2 pr-2 py-1 rounded-circle font-12 text-white">{{item.annt}}</view>
					</view>
				</view>
			</view>

			<!-- 政策资讯 -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">
				<view class="dfex">
					<view class="dfes">
						<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
						<text class="pl-1 font-16 text-101010 font_family">政策资讯</text>
					</view>
					<view @click="gitMin('/pages/tabbar/index/policy')">
						<text class="font-14 text-999999">查看全部</text>
						<text class="iconfont icon-youyou- text-999999 font-16"></text>
					</view>
				</view>

				<view class=" mt-5" >
					<view class="dfex u-line  pb-2 mb-2" v-for="(item, index) in newList" :key="index">
						<view @click="gitMin('/pages/tabbar/index/policyDetails?id='+item.id)">
							<text class="text-333333 font-14">{{item.title}}</text>
							<view class="mt-2 lineHights font-12 text-999999">
								<view>开始时间：{{item.kaisTiem}}</view>
								<view>结束时间：{{item.jshuTiem}}</view>
							</view>
						</view>
						<image style="width: 143px; height: 90px;" :src="item.Image" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 列表  -->
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			<view class="p-2">

				<!-- Tab bar -->
				<view class="dfex">
					<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="currentTab = index"
						:class="{ 'active': currentTab === index }">
						{{ tab }}
					</view>
				</view>

				<!-- Tab content -->
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌积分榜'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/pointsTable')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '黑名单'">
					<text class="font-14 text-999999" @click="gitMin('/pages/tabbar/index/blacklist')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view style="text-align: right" class="mt-2" v-if="tabs[currentTab] === '品牌执法'">
					<text class="font-14 text-999999"
						@click="gitMin('/pages/tabbar/index/brandEnforcement')">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
				<view class="mt-3">
					<view v-for="(item, itemIndex) in currentTabContent" :key="itemIndex">
						<!-- 标签页内容 -->
						<view class="dfex mt-3">
							<template v-if="tabs[currentTab] === '品牌积分榜'">
								<view class="dfes">
									<!-- Customization for '品牌积分榜' tab -->
									<view
										:class="['pr-2 font-20', {'index-color-1': (itemIndex % 3) === 0 && itemIndex < 3, 'index-color-2': (itemIndex % 3) === 1 && itemIndex < 3, 'index-color-3': (itemIndex % 3) === 2 && itemIndex < 3, 'font-color-gray': itemIndex >= 3 }]">
										{{ itemIndex + 1 }}
									</view>
									<image style="width: 35px; height: 35px; border-radius: 100%" :src="item.Image">
									</image>
									<text class="ml-2 font-14 text-333333">{{ item.name }}</text>
								</view>
								<text class="text-78AB06 font-16">{{ item.fouShu }} 积分</text>
							</template>
						</view>
						<!-- 黑名单, 品牌执法 -->
						<template v-if="tabs[currentTab] === '黑名单' || tabs[currentTab] === '品牌执法'">
							<view class="u-line pb-2">
								<view class="dfex ">
									<view>{{item.title}}</view>
									<view>{{item.time}}</view>
								</view>
								<view class="mt-2 text-999999 font-12">{{item.content}}</view>
							</view>
						</template>

					</view>
				</view>
			</view>
		
		  <free-confirm ref="confirm" title="提交申请">
		  	<u-form :model="form">
		  		<u-form-item :label-style="labelStyle" label-width="140" label="原因" prop="name">
		  			<u-input class="mr-3 " v-model="form.name" input-align="right" />
		  		</u-form-item>
		  	</u-form>
		  
		  
		  </free-confirm>
		
		</scroll-view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from '@/common/free-lib/request.js';
	
	export default {
		components: {
			freeNavBar,
			freeConfirm
		},
		data() {
			return {
				form: {
					name: '',
					intro: ''
				},
				confirmType: "",
				confirmText: '',
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				lists: [
					
				],
				CatList: [{
						icon: '&#xe60b;',
						name: '品牌码查询',
						url: '/pages/tabbar/index/query',
						tabIndex: 0,
					},
					{
						icon: '&#xe60c;',
						name: '品牌执法',
						url: '/pages/tabbar/index/brandEnforcement',
						tabIndex: 1,
					},
					{
						icon: '&#xe61b;',
						name: '我的产品',
						url: '/pages/tabbar/market/index',
					},
					{
						icon: '&#xe608;',
						name: '我的服务码',
						url: '/pages/tabbar/user/BrandCode',
					}
				],

				nenoList: [{
						title: '涉农申报业务标题',
						name: '报名中',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '已通过，去查看',
						
					},
					{
						title: '涉农申报业务标题1',
						name: '已结束',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '查看申请审核中',
					},
					{
						title: '涉农申报业务标题1',
						name: '已结束',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '申请查看主体信息',
						
					},
					
				],
				newList: [
				],
				tabs: ['品牌积分榜', '黑名单', '品牌执法'],
				currentTab: 0,
				tabContents: [
					[{
							name: '内容1',
							Image: '/static/logo.png',
							fouShu: 100
						},
						{
							name: '内容2',
							Image: '/static/logo.png',
							fouShu: 200
						},
						{
							name: '内容2',
							Image: '/static/logo.png',
							fouShu: 200
						},
						{
							name: '内容2',
							Image: '/static/logo.png',
							fouShu: 200
						}
					],
					[],
					[]
				]
			}
		},
		onLoad() {
			this.getNoticeList();
			this.getPolicyReleaseList();
			this.getBlacklistList();
			this.getBrandEnforcementList();
		},
		computed: {
			currentTabContent() {
				return this.tabContents[this.currentTab];
			}
		},
		methods: {
			open(url) {
				// 判断url是否属于选项卡页面，如果包含 '/pages/tabbar/' 则认为是选项卡页面
				if (url.includes('/pages/tabbar/market/')) {
					uni.switchTab({
						url
					});
				} else {
					uni.navigateTo({
						url
					});
				}
			},

			gitMin(url) {
				uni.navigateTo({
					url
				})
			},
			click() {
				this.$refs.confirm.show((close) => {
					if (this.confirmText === '') {
						uni.showToast({
							title: "不能为空",
							icon: 'none'
						});
						return;
					}
			
					this.user[key] = this.confirmText;
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					close();
				});
			},
			
			getNoticeList(){
				$H.get('/basisInform/platformNotice/upper/list', {
					pageNo:1,
					pageSize:10
				},{})
					.then(res => {
						const noticeList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							if(res.result.records[i].title){
								noticeList.push(res.result.records[i].title);
							}
						}
						this.lists = noticeList;
					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
					});
			},
			getPolicyReleaseList(){
				$H.get('/basisInform/policyRelease/upper/list', {
					pageNo:1,
					pageSize:10
				},{})
					.then(res => {
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.title,
								kaisTiem: item.source,
								jshuTiem: item.createTime,
								Image: item.cover,
							});
						}
						this.newList = resList;
					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
					});
			}, 
			getBlacklistList(){
				$H.get('/agriculture/blacklist/upper/list', {
					pageNo:1,
					pageSize:10
				},{})
					.then(res => {
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.enterpriseName,
								content: item.enterprisesReason,
								time:item.updateTime
							});
						}
						this.tabContents[1] = resList;
					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
					});
			}, 
			getBrandEnforcementList(){
				$H.get('/agriculture/brandEnforcement/upper/list', {
					pageNo:1,
					pageSize:10
				},{})
					.then(res => {
						let resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							resList.push({
								title: item.enterpriseName,
								content: item.enforcementInstructions,
								time:item.createTime
							});
						}
						this.tabContents[2] = resList;
					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
					});
			}, 
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #FFC251;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #FFC251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #FF0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #FFC251;
	}
</style>